<script lang="ts" setup>
	interface propsType {
		bgc : string;
	}
	const props = withDefaults(defineProps<propsType>(), {
		bgc: "#fff",
	});
</script>
<template>
	<div class="showCard" :style="`background-color: ${bgc};`">
		<div class="title">
			<slot name="title">标题</slot>
		</div>
		<div class="content">
			<div class="conImg">
				<slot name="img">
					<img src="../../../static/image/logo.png" alt="" />
				</slot>
			</div>
			<div class="conText">
				<div class="Num">
					<slot name="number">1234</slot>
				</div>
				<div class="tag">
					<slot name="tag"> 上升: 123 </slot>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
	.showCard {
		min-width: 20vw;
		height: 90%;
		padding: 0 20px;
		padding-top: 12px;

		.title {
			font-size: 20px;
			font-weight: 700;
		}

		.content {
			height: 65%;
			display: flex;
			align-items: center;

			.conImg {
				height: 60px;
				width: 60px;
				background-color: rgb(177, 143, 143);
				border-radius: 50%;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.conText {
				margin-left: 15px;
				height: 70px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.Num {
					font-size: 25px;
					font-weight: 550;
				}

				.tag {
					font-size: 15px;
					color: #999;
				}
			}
		}
	}
</style>